<template>
  <h4>消息列表</h4>
  <div>以下是各种守卫的简单定义</div>
  <ul>
    <li>全局前置守卫 - 用 router.beforeEach 注册</li>
    <li>全局解析守卫 - 用 router.beforeResolve 注册</li>
    <li>全局后置钩子 - 用 router.afterEach 注册</li>
    <li>路由独享的守卫 - 直接在路由配置上定义 beforeEnter 守卫</li>
    <li>组件内的守卫
      <ul>
        <li>beforeRouteEnter - 在渲染该组件的对应路由被验证前调用</li>
        <li>beforeRouteUpdate - 在当前路由改变，但是该组件被复用时调用</li>
        <li>beforeRouteLeave - 在导航离开渲染该组件的对应路由时调用</li>
        <li>使用组合 API 和 setup 函数来编写组件，你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。</li>
      </ul>
    </li>
  </ul>
</template>

<script>
import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      console.log('%%% onBeforeRouteLeave 组合式API 组件内守卫', 'to:', to.path, 'from:', from.path)
    })

    onBeforeRouteUpdate((to, from) => {
      console.log('%%% onBeforeRouteUpdate 组合式API 组件内守卫', 'to:', to.path, 'from:', from.path)
    })
  },
}
</script>